/* the variables */
:root {
  /* base color */
  --color-main: #324057;
  --color-primary: #357ebd;
  --color-primary-deep: #428BCA;
  --color-success: #5cb85c;
  --color-warning: #f7ba2a;
  --color-danger: #d9534f;
  --color-info: #50BFFF;
  --color-white: #fff;
  --color-black: #000;
  --color-grey: #c0ccda;
  --color-green: #006604;
  --color-orange: #f66400;

  /* link color */
  --color-blue-light: #37a8fc;

  /* menu */
  --menu-fill: var(--color-main);
  --menu-active-fill: #5e6d82;
  --submenu-fill: #1f2d3d;
  --submenu-sub-filll: #8492A6;

  /* filter */
  --filter-fill: #475669;

  /* border-color */
  --border-grey: #e5e9f2;

  /* shadow */
  --card-shadow: 0 0 12px 0 rgba(188,188,188,0.50);

  /* font-size */
  --big-hd-size: 20px;
  --hd-size: 18px;
  --sub-hd-size: 16px;
  --normal-size: 14px;
  --small-size: 13px;
  --smaller-size: 12px;

  /* transition */
  --all-transition: all .3s cubic-bezier(.645,.045,.355,1);
}
